  <!-- <div style="background-color:white">
    <el-container>
      
      <el-main style="
        display:flex;
        justify-content:center;">
        
        <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" > 
          <el-steps :active="1" align-center>
        <el-step title="步骤1" description="填写公司认证信息"></el-step>
        <el-step title="步骤2" description="签订入驻协议"></el-step>
        <el-step title="步骤3" description="公司入驻成功"></el-step>
      </el-steps>
          <div>
          <h1>填写公司认证信息</h1>
        </div>
      <el-form-item label="公司名称" prop="name" required>
        <el-input v-model="ruleForm.name" ></el-input>
      </el-form-item>
      <el-form-item label="归属城市" prop="region" required>
        <el-cascader
        v-model="ruleForm.selectedArea"
                  :options="areaOptions"
                  :props="cascaderProps"
                  placeholder="请选择省市区"
                  clearable
                  filterable
          ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" required>
        <el-input type="textarea" v-model="ruleForm.address" style="width:300px;height:100px;
        display:flex;
        justify-content:flex-start;"></el-input>
      </el-form-item>
      <el-form-item label="社会信用码" prop="creditcode" required>
        <el-input v-model="ruleForm.creditcode"></el-input>
      </el-form-item>

      <el-form-item label="法人姓名" prop="legalpersonname" required>
        <el-input v-model="ruleForm.legalpersonname"></el-input>
      </el-form-item>
      <el-form-item label="法人手机号码" prop="legalpersonphone" required>
        <el-input v-model="ruleForm.legalpersonphone"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证号码" prop="legalpersonidcard" required>
        <el-input v-model="ruleForm.legalpersonidcard"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证正面" prop="idcardimg1" required>
        <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"                       
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="idcardVisible1">
      <img width="100%" :src="idcardImageUrl1" alt="">
      </el-dialog>

      </el-form-item>
      <el-form-item label="法人身份证反面" prop="idcardimg2" required>
        <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="idcardVisible2">
      <img width="100%" :src="idcardImageUrl2" alt="">
      </el-dialog>


      </el-form-item>
      <el-form-item label="营业执照" prop="license" required>
        <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"

      :file-list="ruleForm.fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      </el-form-item>

      <el-form-item>
        <router-link 
          to="/contract"
          class="el-button el-button--primary"
          style="text-decoration: none">
          下一步
        </router-link>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
      </el-form>

      </el-main>
    </el-container>

  </div> -->
  <template>
    <div class="form-container">
      <el-container>
        <el-main class="form-main">
          <el-form 
            :model="ruleForm" 
            ref="ruleFormRef" 
            label-width="100px"
            class="custom-form"
          > 
            <el-steps :active="1" align-center>
              <el-step title="步骤1" description="填写公司认证信息" />
              <el-step title="步骤2" description="签订入驻协议" />
              <el-step title="步骤3" description="公司入驻成功" />
            </el-steps>
  
            <h1 class="form-title">填写公司认证信息</h1>
  
            <el-form-item label="公司名称" prop="name" required>
              <el-input v-model="ruleForm.name" />
            </el-form-item>
  
            <el-form-item label="归属城市" prop="region" required>
              <el-cascader
                v-model="ruleForm.selectedArea"
                :options="areaOptions"
                :props="cascaderProps"
                placeholder="请选择省市区"
                clearable
                filterable
              />
            </el-form-item>
  
            <el-form-item label="详细地址" required>
              <el-input 
                type="textarea" 
                v-model="ruleForm.address" 
                class="address-textarea"
              />
            </el-form-item>
  
            <el-form-item label="社会信用码" prop="creditcode" required>
              <el-input v-model="ruleForm.creditcode" />
            </el-form-item>
  
            <el-form-item label="法人姓名" prop="legalpersonname" required>
              <el-input v-model="ruleForm.legalpersonname" />
            </el-form-item>
  
            <el-form-item label="法人手机号码" prop="legalpersonphone" required>
              <el-input v-model="ruleForm.legalpersonphone" />
            </el-form-item>
  
            <el-form-item label="法人身份证号码" prop="legalpersonidcard" required>
              <el-input v-model="ruleForm.legalpersonidcard" />
            </el-form-item>
  
            <el-form-item label="法人身份证正面" prop="idcardimg1" required>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                v-model:file-list="ruleForm.fileList1"
                :on-preview="handlePictureCardPreview1"
                :on-remove="handleRemove"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="idcardVisible1">
                <img width="100%" :src="idcardImageUrl1" alt="">
              </el-dialog>
            </el-form-item>
  
            <el-form-item label="法人身份证反面" prop="idcardimg2" required>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                v-model:file-list="ruleForm.fileList2"
                :on-preview="handlePictureCardPreview2"
                :on-remove="handleRemove"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="idcardVisible2">
                <img width="100%" :src="idcardImageUrl2" alt="">
              </el-dialog>
            </el-form-item>
  
            <el-form-item label="营业执照" prop="license" required>
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                v-model:file-list="ruleForm.fileList"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </template>
              </el-upload>
            </el-form-item>
  
            <el-form-item class="form-actions">
              <router-link 
                to="/contract"
                custom
                v-slot="{ navigate }"
              >
                <el-button type="primary" @click="navigate">下一步</el-button>
              </router-link>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
  </template>


<!-- <script>
// import AppLayout from '@/components/layout/AppLayout.vue'
import { regionData, CodeToText } from 'element-china-area-data';
export default {
  // components:{
  //   AppLayout
  // },
data(){
  return {
    ruleForm: {
        name: '',
        selectedArea: [], // 绑定选中的code数组，如['110000','110100','110101']
        creditcode:"",
        fileList:[{name: '', url: ''}, {name: '', url: ''}],
        legalpersonname:"",
        legalpersonphone:"",
        legalpersonidcard:"",
        address: "",
        idcardImageUrl1: '',
        idcardVisible1: false,
        idcardImageUrl2: '',
        idcardVisible2: false,
      },
      areaOptions: regionData, // 直接使用导入的省市区数据
    cascaderProps: {
      value: 'value',    // 对应regionData中的字段
      label: 'label',    // 对应regionData中的字段
      children: 'children', // 对应regionData中的字段
      expandTrigger: 'hover'
    }
     
}
},
computed: {
  // 将code转换成文字路径
  selectedAreaLabels() {
    if (this.selectedArea.length === 0) return '未选择';
    return this.selectedArea.map(code => CodeToText[code]).join('/');
  }
},
methods:
{
  // handleRemove(file, fileList) {
  //     console.log(file, fileList);
  //   },
  //   handlePictureCardPreview(file) {
  //     this.dialogImageUrl = file.url;
  //     this.dialogVisible = true;
  //   },
  //   handleRemove(file, fileList) {
  //     console.log(file, fileList);
  //   },
  //   handlePreview(file) {
  //     console.log(file);
  //   },
  //   handleExceed(files, fileList) {
  //     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  //   },
  //   beforeRemove(file, fileList) {
  //     return this.$confirm('确定移除 ${ file.name }?');
  //   }

}
}

</script> -->

<script setup>
import { ref, computed } from 'vue'
import { regionData } from 'element-china-area-data'
import { Plus } from '@element-plus/icons-vue'

// 表单引用
const ruleFormRef = ref(null)

// 表单数据
const ruleForm = ref({
  name: '',
  selectedArea: [],
  creditcode: "",
  fileList: [],
  fileList1: [],
  fileList2: [],
  legalpersonname: "",
  legalpersonphone: "",
  legalpersonidcard: "",
  address: ""
})

// 图片预览相关
const idcardImageUrl1 = ref('')
const idcardVisible1 = ref(false)
const idcardImageUrl2 = ref('')
const idcardVisible2 = ref(false)

// 地区选择配置
const areaOptions = regionData
const cascaderProps = {
  value: 'value',
  label: 'label',
  children: 'children',
  expandTrigger: 'hover'
}

// 计算属性：选中的地区标签
const selectedAreaLabels = computed(() => {
  return ruleForm.value.selectedArea.length === 0 
    ? '未选择' 
    : ruleForm.value.selectedArea.map(code => CodeToText[code]).join('/')
})

// 方法定义
const handleRemove = (file, fileList) => {
  console.log('移除文件:', file, fileList)
}

const handlePictureCardPreview1 = (file) => {
  idcardImageUrl1.value = file.url
  idcardVisible1.value = true
}

const handlePictureCardPreview2 = (file) => {
  idcardImageUrl2.value = file.url
  idcardVisible2.value = true
}

const handlePreview = (file) => {
  console.log('预览文件:', file)
}

const beforeRemove = (file) => {
  return confirm(`确定移除 ${file.name}?`)
}

const resetForm = () => {
  ruleForm.value = {
    name: '',
    selectedArea: [],
    creditcode: "",
    fileList: [],
    fileList1: [],
    fileList2: [],
    legalpersonname: "",
    legalpersonphone: "",
    legalpersonidcard: "",
    address: ""
  }
  ruleFormRef.value?.resetFields()
}
</script>

<!-- <style>
 
.header {
  display: flex;           
  justify-content: space-between; 
  align-items: center;    
  height: 200px;
  padding: 0 20px;        
}

.welcome-text {
  font-weight: bold;      
  font-size: 18px;       
}

.right-group {
  display: flex;
  gap: 20px;             
}

.contact, .name {
  font-weight: bold;      
}

.el-main {
  height: 650px;
  text-align: center;
}

</style>
<style scoped>
/* 只影响当前组件的样式 */
.header {
  background-color: aliceblue; /* 只覆盖/添加差异部分 */
}

.el-main {
  overflow: hidden; /* 新增属性 */
  padding: 20px;   /* 新增属性 */
}

.el-input, 
.el-cascader {    /* 修正选择器，添加点号 */
  width: 300px; 
  display: flex;
  justify-content: flex-start;
}

.el-form {
  max-height: 100%;
  overflow-y: auto;
}

.el-form::-webkit-scrollbar {
  display: none;
}
</style> -->
<style scoped>
/* 头部布局 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  padding: 0 20px;
  background-color: aliceblue;
}

/* 文本样式 */
.welcome-text, .contact, .name {
  font-weight: bold;
}
.welcome-text {
  font-size: 18px;
}

/* 右侧按钮组 */
.right-group {
  display: flex;
  gap: 20px;
}

/* Element Plus 组件样式 */
:deep(.el-main) {
  height: 650px;
  text-align: center;
  overflow: hidden;
  padding: 20px;
}

:deep(.el-form) {
  max-height: 100%;
  overflow-y: auto;
}

:deep(.el-form::-webkit-scrollbar) {
  display: none;
}

:deep(.el-input),
:deep(.el-cascader) {
  width: 300px;
  display: flex;
  justify-content: flex-start;
}
</style>